<script setup lang="ts">
import type { TagProps } from 'element-plus'
import { Notification } from '@element-plus/icons-vue'
import SearchForm from './components/SearchForm.vue'
import type { TableList } from './types'
import ListsPagination from '@/components/ListsPagination/ListsPagination.vue'
import TableLists from '@/components/TableLists/TableLists.vue'
import { PAGING } from '@/constant'
import { earlyWarningApi, warningProcessApi } from '@/api'
import { uuid } from '@/utils'

import type { TableColumn } from '@/types'

const loading = ref(true)
const lists = ref<TableList[]>([])
const columns: TableColumn<TableList>[] = reactive([
  {
    key: uuid(),
    label: '预警级别',
    prop: 'warningLevelName',
    render({ row }) {
      if (row.earlyWarningLevel === '')
        return h('span')
      const level = +row.earlyWarningLevel
      return h(
        ElTag,
        {
          type: (['', 'danger', 'warning', ''][level]) as TagProps['type'],
        },
        () => row.warningLevelName,
      )
    },
  },
  {
    key: uuid(),
    label: '预警类型',
    prop: 'warningTypeName',
  },
  {
    key: uuid(),
    label: '预警内容',
    prop: 'earlyWarningContent',
  },
  {
    key: uuid(),
    label: '处理状态',
    prop: 'warningStateName',
  },
])
const pagination = reactive({
  pageNum: 1,
  pageSize: PAGING.PARAMS.pageSize,
  total: 0,
})

const searchFormRef = ref<InstanceType<
  typeof SearchForm
> | null>(null)

async function queryLists() {
  loading.value = true
  const { pageNum, pageSize } = pagination
  const type = searchFormRef.value?.query.type
  try {
    const { data }
      = await earlyWarningApi.selectEarlyWarningList(
        pageNum,
        pageSize,
        type,
      )
    lists.value = data.records
    pagination.total = data.total
  }
  finally {
    loading.value = false
  }
}

function clickSearch() {
  pagination.pageNum = 1
  nextTick(() => {
    queryLists()
  })
}

function clickProcess(
  row: TableList,
  status: TableList['warningState'],
) {
  ElMessageBox.prompt('处理内容', '处理预警', {
    inputPlaceholder: '请输入处理内容，字数在20个以内',
    inputErrorMessage: '请输入处理内容，字数在20个以内',
    inputPattern: /^\w{1,20}$/,
    cancelButtonText: '取消',
    confirmButtonText: '确定',
  })
    .then(({ value }) => {
      warningProcessApi
        .processWarning({
          warningId: +row.id,
          processState: status,
          processContent: value,
        })
        .then(() => {
          queryLists()
        })
    })
    .catch(() => {})
}

onMounted(() => {
  queryLists()
})
</script>

<template>
  <div
    class="padding-sm flex-direction flex align-end container"
  >
    <TableLists
      :loading="loading"
      :lists="lists"
      :columns="columns"
      :show-toolbox="true"
    >
      <template #actions>
        <SearchForm
          ref="searchFormRef"
          @search="clickSearch"
        />
      </template>
      <template #operate="{ row }">
        <ElDropdown>
          <ElIcon color="var(--el-color-primary)">
            <Notification />
          </ElIcon>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item
                style="color: var(--el-color-primary)"
                @click="clickProcess(row, '3')"
              >
                解决
              </el-dropdown-item>
              <el-dropdown-item
                style="color: var(--el-color-danger)"
                @click="clickProcess(row, '4')"
              >
                忽略
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </ElDropdown>
      </template>
    </TableLists>
    <ListsPagination
      v-model:page-num="pagination.pageNum"
      v-model:page-size="pagination.pageSize"
      :total="pagination.total"
      @current-change="queryLists"
      @size-change="queryLists"
    />
  </div>
</template>
